
// 注册全局自定义指令
export default {
  install(Vue) {
    Vue.directive('size-ob', {
      // 监控el尺寸变化
      bind: function (el, binding, vnode) {
        console.log(el, binding);
        const resizeObserver = new ResizeObserver(entries => {
          for (let entry of entries) {
            const { width, height } = entry.contentRect
            //将大小传给回调函数
            binding.value({width,height})
          }
        })
        // 开始监听元素尺寸变化
        resizeObserver.observe(el)
        // 将observer实例保存到元素上，以便在unbind时清理
        el._resizeObserver = resizeObserver
      },
      unbind: function (el) {
        // 清理ResizeObserver
        if (el._resizeObserver) {
          el._resizeObserver.disconnect()
          delete el._resizeObserver
        }
      }
    })
  }
}